<template>
  <div class="shop-user">
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-button type="primary" icon="el-icon-plus" size="small" @click="()=>{this.$router.push({name:'addUser', query: { store_id: this.$route.query.store_id }})}">添加店员</el-button>
    </el-row>
    <el-row  class="mt20">
      <el-table size="small" :data="userList">
        <el-table-column label="序号" type="index" align="center"></el-table-column>
        <el-table-column label="所属门店" prop="store_name" align="center"></el-table-column>
        <el-table-column label="店员姓名" prop="staff_name" align="center"></el-table-column>
        <el-table-column label="店员登录手机号" prop="username" align="center"></el-table-column>
        <el-table-column label="职位" prop="position" align="center"></el-table-column>
        <el-table-column label="添加时间" prop="created_at" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template slot-scope="scope">
            <span :class="scope.row.status === 1 ? 'succ' : 'err'">{{ scope.row.status === 1 ? '正常' : '离职'}}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" size="small" class="warning" @click="edit('editUser',scope.row.id)">修改</el-button>
            <el-button type="text" size="small" @click="del(scope.row.id, scope.row.store_name)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :total="page.total" :current-page.sync="page.currentPage" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
    </el-row>
  </div>
</template>

<script>
// 接受父组件传入的权限值 判断是否显示按钮和表格操作
import Breadcrumb from '@/components/Breadcrumb'
import { chekcUserInit, checkUserPage, checkUserDel } from '@/api/shop'

export default {
  name: 'shopUser',
  components: {
    Breadcrumb
  },
  data() {
    return {
      userList: [],
      page: {
        total: 0,
        pageSize: 0,
        currentPage: 1
      }
    }
  },
  created() {
    chekcUserInit(this.$route.query.store_id).then(Response => {
      this.userList = Response.data.result.data
      this.page.total = Response.data.result.total
      this.page.pageSize = Response.data.result.per_page
    })
  },
  methods: {
    edit(name, id) {
      this.$router.push({ name: name, query: { staff_id: id }})
    },
    handleCurrentChange(v) {
      checkUserPage(this.$route.query.store_id, v).then(response => {
        this.userList = response.data.result.data
        this.page.total = response.data.result.total
      })
    },
    del(id, name) {
      const model = confirm('是否删除员工' + name)
      if (model) {
        checkUserDel(id).then(response => {
          if (response.data.errorCode === 0) {
            this.$message.success(response.data.errorMsg)
            if (this.userList.length === 1) {
              if (this.page.currentPage === 1) {
                this.handleCurrentChange(this.page.currentPage = 1)
                this.userList = response.data.result.data
              } else {
                this.handleCurrentChange(this.page.currentPage - 1)
                this.userList = response.data.result.data
                this.page.currentPage === 1 ? this.page.currentPage = 1 : this.page.currentPage -= 1
              }
            } else {
              if (this.page.currentPage === 1) {
                this.handleCurrentChange(this.page.currentPage = 1)
                this.userList = response.data.result.data
              } else {
                this.handleCurrentChange(this.page.currentPage - 1)
                this.userList = response.data.result.data
                this.page.currentPage === 1 ? this.page.currentPage = 1 : this.page.currentPage -= 1
              }
            }
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
      }
    }
  }
}
</script>